<h1>引入图片</h1>
<img src="/assets/images/01.png" alt="收藏">

<img [src]="picUrl">

<ul>
  <li *ngFor="let item of list; let key=index;">
    {{key}}--{{item.title}}
  </li>
</ul>

<h2>条件判断语句：*ngif</h2>

<div *ngIf="flag">
  <img src="/assets/images/01.png" alt="收藏">

</div>
<div *ngIf="!flag">
  <img src="/assets/images/02.png" alt="收藏">

</div>

<ul>
  <li *ngFor="let item of list; let key=index;">
    <span *ngIf="key==1" class="red">{{key}}--{{item.title}}</span>
    <span *ngIf="key!=1">{{key}}--{{item.title}}</span>
  </li>
</ul>

<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
  表示已经支付
</p>
<p *ngSwitchCase="2">
  支付并且确认订单
</p>
<p *ngSwitchCase="3">
  表示已经发货
</p>
<p *ngSwitchCase="4">
  表示已经收货
</p>
<p *ngSwitchDefault>
  无效订单
</p>
</span>

<h1>属性【ngClass]\[ngStyle]</h1>

<div class="red">
  ngClass演示    （尽量不要用DOM来改变class)
</div>

<div [ngClass]="{'orange': flag, 'red': !flag}">
  ngClass演示
</div>

<ul>
  <li *ngFor="let item of list; let key=index" [ngClass]="{'red':key==0, 'blue':key==1, 'orange':key==2}">
    {{key}}--{{item.title}}
  </li>
</ul>

<hr>
<p style="color:red">我是一个p标签</p>

<p [ngStyle]="{'color':'red'}">我是一个p标签</p>

<p [ngStyle]="{'color':attr}">我是一个p标签</p>

<br>

<h1>管道</h1>

{{today | date: 'yyyy-mm-dd HH:mm ss'}}

<h1>管道</h1>
{{title}}
<button (click)="run()">执行事件</button>
<br>
<button (click)="getData()">获取数据</button>
<br>
<button (click)="setData()">设置数据</button>

<h1>表单事件以及事件对象</h1>
keyDown:
<input type="text" (keydown)='keyDown($event)'>
<br>
keyUp:
<input type="text" (keyup)='keyUp($event)'>

<h1>双向数据绑定--MVVM 只是针对表单</h1>

<input type="text" [(ngModel)]='keywords'/>
{{keywords}}
<br>
<br>


<button (click)="changeKeywords()">改变keywords的值</button>

<br>
<br>

<button (click)="getKeywords()">获取keywords的值</button>
